{% extends "_layouts/examples.html" %}
{% block title %}Legacy grid / Full (deprecated){% endblock %}

{% block standalone_css %}patterns_grid{% endblock %}

{% block content %}
<div class="grid-demo">
  <div class="row">
    <div class="col-12">
      <span>.col-12</span>
    </div>
  </div>
  <div class="row">
    <div class="col-11">
      <span>.col-11</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
  </div>
  <div class="row">
    <div class="col-10">
      <span>.col-10</span>
    </div>
    <div class="col-2">
      <span>.col-2</span>
    </div>
  </div>
  <div class="row">
    <div class="col-9">
      <span>.col-9</span>
    </div>
    <div class="col-3">
      <span>.col-3</span>
    </div>
  </div>
  <div class="row">
    <div class="col-8">
      <span>.col-8</span>
    </div>
    <div class="col-4">
      <span>.col-4</span>
    </div>
  </div>
  <div class="row">
    <div class="col-7">
      <span>.col-7</span>
    </div>
    <div class="col-5">
      <span>.col-5</span>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <span>.col-6</span>
    </div>
    <div class="col-6">
      <span>.col-6</span>
    </div>
  </div>
  <div class="row">
    <div class="col-5">
      <span>.col-5</span>
    </div>
    <div class="col-7">
      <span>.col-7</span>
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <span>.col-4</span>
    </div>
    <div class="col-8">
      <span>.col-8</span>
    </div>
  </div>
  <div class="row">
    <div class="col-3">
      <span>.col-3</span>
    </div>
    <div class="col-9">
      <span>.col-9</span>
    </div>
  </div>
  <div class="row">
    <div class="col-2">
      <span>.col-2</span>
    </div>
    <div class="col-10">
      <span>.col-10</span>
    </div>
  </div>
  <div class="row">
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-11">
      <span>.col-11</span>
    </div>
  </div>
  <div class="row">
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
    <div class="col-1">
      <span>.col-1</span>
    </div>
  </div>
  <div class="row">
    <div class="col-2">
      <span>.col-2</span>
    </div>
    <div class="col-2">
      <span>.col-2</span>
    </div>
    <div class="col-2">
      <span>.col-2</span>
    </div>
    <div class="col-2">
      <span>.col-2</span>
    </div>
    <div class="col-2">
      <span>.col-2</span>
    </div>
    <div class="col-2">
      <span>.col-2</span>
    </div>
  </div>
  <div class="row">
    <div class="col-3">
      <span>.col-3</span>
    </div>
    <div class="col-3">
      <span>.col-3</span>
    </div>
    <div class="col-3">
      <span>.col-3</span>
    </div>
    <div class="col-3">
      <span>.col-3</span>
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <span>.col-4</span>
    </div>
    <div class="col-4">
      <span>.col-4</span>
    </div>
    <div class="col-4">
      <span>.col-4</span>
    </div>
  </div>
</div>
{% endblock %}
